<template>
  <div class="overflow-hidden">
    <n-card title="" :bordered="false" class="h-full rounded-8px shadow-sm">
      <div class="flex-col h-full">
        <n-space class="pb-12px" justify="space-between">
          <n-space>
            <n-input v-model:value="operator_id" type="text" placeholder="ID" clearable />
            <n-date-picker v-model:formatted-value="year_month" value-format="yyyy-MM" type="month" clearable />
            <n-button type="primary" @click="handleAddTable">
              查询
            </n-button>
          </n-space>
          <n-space align="center" :size="18">
            <n-button size="small" type="primary" @click="getTableData()">
              <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
              刷新表格
            </n-button>
            <column-setting v-model:columns="columns" />
          </n-space>
        </n-space>
        <n-data-table remote :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" flex-height  class="flex-1-hidden" />
        <table-action-modal :jiluId="jiluId" v-model:visible="visible"  @refresh="getTableData()" />
      </div>
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref } from 'vue';
import type { Ref } from 'vue';
import { NButton, NPopconfirm, NSpace, NTag } from 'naive-ui';
import type { DataTableColumns, PaginationProps } from 'naive-ui';
import { applyWithdrawalList, examineWithdrawal } from '@/service';
import { useBoolean, useLoading } from '@/hooks';
import TableActionModal from './components/table-action-modal.vue';
import ColumnSetting from './components/column-setting.vue';

const { loading, startLoading, endLoading } = useLoading(false);
const { bool: visible, setTrue: openModal } = useBoolean();

const columns: Ref<DataTableColumns<any>> = ref([
  {
    key: 'operator_id',
    title: 'ID',
    align: 'center'
  },
  {
    key: 'username',
    title: '用户名',
    align: 'center'
  },
  {
    key: 'income',
    title: '申请金额',
    align: 'center'
  },
  {
    key: 'status',
    title: '状态',
    align: 'center',
    render: (row: any) => {
      switch (row.status) {
        case 0:
          return <div>未体现</div>
        case 1:
          return <div style="color: orange;">申请中</div>
        case 2:
          return <div style="color: green;">提现成功</div>
        case 3:
          return <div style="color: red;">拒绝</div>
        default:
          return null
      }
    }
  },
  {
    key: 'application_time',
    title: '申请时间',
    align: 'center'
  },
  {
    key: 'transfer_records',
    title: '转账截图',
    align: 'center',
    render: (row: any) => {
      return (
        <n-image
          width="50"
          lazy
          src={row.transfer_records}
        />
      );
    }
  },
  {
    key: 'actions',
    title: '审核',
    align: 'center',
    render: (row: any) => {
      if (row.status === 1) {
        return (
          <NSpace justify={'center'}>
            <NButton size={'small'} type="success" onClick={() => handleResole(row)}>通过</NButton>
            <NPopconfirm onPositiveClick={() => handleReject(row)}>
              {{
                default: () => '确认拒绝',
                trigger: () => <NButton size={'small'} type="error">拒绝</NButton>
              }}
            </NPopconfirm>
          </NSpace>
        );
      }
    }
  }
]) as Ref<any>;

let operator_id: any = ref(null)
let year_month: any = ref(null)
// 查询
function handleAddTable() {
  pagination.page = 1
  // console.log(year_month);
  getTableData()
}

// 记录id
let jiluId = ref(null)
// 同意
function handleResole(row:any) {
  console.log(row);
  jiluId.value = row.id
  openModal()
}
// 拒绝
async function handleReject(row: any) {
  console.log(row);
  const params = {
    id: row.id,
    status: 3,
    transfer_records: ''
  }
  await examineWithdrawal(params)
  getTableData()
}

const tableData = ref<any>([]);
async function getTableData() {
  startLoading();
  let params = {
    page: pagination.page,
    page_size: pagination.pageSize,
  }
  const { data } = await applyWithdrawalList(params);
  // console.log(data);
  if (data) {
    tableData.value = data.item;
    pagination.itemCount = data.total;
    endLoading();
  }
}

// 分页
const pagination: PaginationProps = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 15, 20, 25, 30],
  onChange: (page: number) => {
    pagination.page = page;
    getTableData();
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
    getTableData();
  }
});

let moneyTypeList = ref([
  {
    id: 'tixian',
    color: '#2f4056',
    title: '提现金额',
    money: 0.0,
  },
  {
    id: 'account',
    color: '#149bff',
    title: '账户金额',
    money: 0.0,
  },
  {
    id: 'totalIncome',
    color: '#998831',
    title: '总收益',
    money: 0.0,
  }
])


function init() {
  getTableData();
}

// 初始化
init();
</script>

<style scoped></style>
